<template>
    <div class="detail">
        <div class="info">
            <div class="title">{{ detail.goodsName }}</div>
            <div class="des">{{ detail.goodsIntro }}</div>
        </div>
        <rich-text :nodes="html"></rich-text>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import mitt from "../../../utils/mitt";
import { RectDown } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { goodsForRec } from '../../../../api/index'
export default {
    components: {
        RectDown
    },
    emits: ['title'],
    setup(props, ctx) {
        const data = reactive({
            id: '',
            detail: {
                list: []
            },
            html: '',
        });

        onMounted(() => {
            const router = useRouter();
            if (router.params.id) {
                data.id = router.params.id
                getProductDetail(router.params.id)
            }
        });
        const getProductDetail = (id) => {
            goodsForRec(id).then(res => {
                if (res.resultCode == 200) {
                    data.detail = res.data
                    ctx.emit('title', res.data.goodsName)
                    mitt.emit('detail', res.data)
                    data.html = formatImg(res.data.goodsDetailContent)
                }
            })
        };
        const formatImg = (html) => {
            var newContent = html.replace(/<img[^>]*>/gi, (match) => {
                let processed = null;
                if (!match.match(/style=\"(.*)\"/gi)) {
                    processed = match.replace(/\<img/g, '<img style="width:100%;height:auto;display:block"');
                } else {
                    processed = match.replace(/style=\"(.*)\"/gi, 'style="width:100%;height:auto;display:block"');
                }
                return processed;
            });
            return newContent;
        }
        return {
            ...toRefs(data), getProductDetail, formatImg
        }
    }
};
</script>


<style lang="scss" >
.detail {
    .info {
        padding: 30rpx 30rpx 20rpx;

        .title {
            color: #000;
            font-size: 34rpx;
            font-weight: bold;
        }

        .des {
            color: #747774;
            font-size: 28rpx;
            margin: 10rpx 0;
        }

        .price {
            color: #F25C26;
            font-size: 26rpx;

            text {
                margin-left: 10rpx;
                text-decoration: line-through;
                color: #909090;
            }
        }

        .coupon {
            margin-top: 10rpx;

            div:first-child {
                text {
                    color: red;
                    font-size: 24rpx;
                    border: 1rpx solid red;
                    border-radius: 10rpx;
                    padding: 2rpx 4rpx;
                    margin-right: 5rpx;
                }
            }

            div:last-child {
                color: #333;
                font-size: 24rpx;

                text {
                    margin-right: 5rpx;
                }
            }
        }
    }
}
</style>